.main-features {
    margin-left: -14px;
    margin-right: -14px;
    border: 1px solid $body-bg;

    > .row {
        margin: -1px;
    }
}

.main-feature {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    transition: all .35s ease-in-out;
    color: $primary;

    &::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border-right: 1px solid $border-color;
        border-top: 1px solid $border-color;
        left: -1px;
        right: 0;
        bottom: -1px;
        top: 0;
    }

    &__icon,
    &__content {
        padding: 1rem;
        i {
            font-size: 2.5rem;
        }
    }

    &__title,
    &__description {
        margin: 0;
    }

    &__title {
        font-size: $font-size-lg;
        font-weight: $font-weight-semi-bold;
    }

    &__description {
        font-weight: $font-weight-light;
    }

    &:hover,
    &:active,
    &:focus {
        color: $secondary;
        box-shadow: $z-depth-1-half;
    }

    &:active {
        background-color: $gray-200;
    }

    &--disabled {
        flex-direction: column;
        pointer-events: none;
        color: $gray-500;

        .main-feature__icon {
            color: $gray-300;
            padding-bottom: .2rem;
        }

        .main-feature__content {
            font-weight: $font-weight-light;
            font-style: italic;
            padding-top: .2rem;
        }
    }
}
